.betChoice {
    padding: 16rem;
    background-color: #F1F5F9;

    .moneyNum {
        padding: 12rem 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .moneyItem {
            background: url("@/assets/images/ColorfulLottery/moneyBg.png") no-repeat;
            background-size: contain;
            width: 30rem;
            height: 30rem;
            color: #FF2D55;
            text-align: center;
            font-family: DIN;
            font-size: 12rem;
            line-height: 30rem;
            font-weight: 700;

            &:not(:first-child) {
                margin-left: 15rem;
            }

            &.moneyActive {
                background: url("@/assets/images/ColorfulLottery/activeMoneyBg.png") no-repeat;
                width: 30rem;
                height: 30rem;
                background-size: contain;
            }
        }

        .inputMoney {
            display: flex;
            margin-left: 15rem;
            align-items: center;
            position: relative;

            img {
                width: 30rem;
                height: 30rem;
                z-index: 2;
            }

            &>input {
                border-radius: 6rem;
                border: 1rem solid #D8DFE7;
                background: #F1F5F9;
                width: 100rem;
                line-height: 24rem;
                position: absolute;
                left: 20rem;
                text-indent: 10rem;
                color: #FF2D55;
                font-family: DIN;
                font-size: 14rem;
                font-style: normal;
                font-weight: 700;

                ::placeholder {
                    color: #647282;
                    text-align: center;
                    font-family: DIN;
                    font-size: 12rem;
                    font-weight: 500;
                }

                &:focus {
                    outline: none;
                }
            }
        }
    }

    .rankPoker {
        margin-top: 20rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .pokerItem {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 36rem;
            height: 48rem;
            font-size: 24rem;
            font-weight: 700;
            border-radius: 6rem;
            border: 1.4rem solid transparent;
            font-family: DIN;
            color: #FFF;

            &.active {
                margin-top: -40rem;
            }
        }
    }

    .cardList {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 8rem;
        margin-top: 16rem;

        .cardItem {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 105rem;
            border-radius: 8rem;
            border: 1rem solid #E8E6EF;
            background-color: #FFF;

            .types {
                display: flex;
                flex-direction: row;
                align-items: center;
                align-self: flex-start;
                font-size: 14rem;
                color: #D8DFE7;

                &>img {
                    margin-left: 4rem;
                    width: 13rem;
                    height: 16rem;
                }
            }

            .rankList {
                display: flex;
                flex-direction: row;
                margin-top: 2rem;

                .rankItem {
                    width: 20rem;
                    height: 20rem;
                    border-radius: 4rem;
                    border: 1rem solid transparent;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #FFF;

                    &+.rankItem {
                        margin-left: 4rem;
                    }
                }
            }

            .single {
                margin-top: 5rem;
                height: 20rem;
                line-height: 20rem;
                padding: 0 10rem;
                border-radius: 10rem;
                background: #FFEAF0;
                color: #FF2D55;
                font-size: 14rem;
                font-weight: 700;
            }

            .moneyLabel {
                margin-top: 5rem;
                color: #343C4B;
                font-size: 12rem;
            }

            .money {
                margin-top: 5rem;
                color: #FF6F1E;
                font-size: 14rem;
                font-weight: 700;
            }

            &.active {
                border-color: #FF2D55;
                background: #FFE8EE;

                .types {
                    color: #FF2D55;
                }

                .single {
                    background: #FFC1D1;
                }
            }
        }
    }

    .betBtns {
        margin-top: 16rem;
        display: flex;
        justify-content: flex-end;

        .btn {
            background: #FFE8DB;
            color: #FF6F1E;
            padding: 0 20rem;
            border: 0;
            font-weight: 600;
            font-size: 14rem;
        }

        .status {
            margin-left: 18rem;
            width: 10rem;
            border-radius: 6px;
            border: 1rem solid #CBD5E0;
            background: #D9E4EE;
            position: relative;

            &>span {
                display: inline-block;
                width: 10rem;
                height: 10rem;
                border-radius: 50%;
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 1;
                background: #FFF;
            }
        }
    }

    .tips {
        margin-top: 8rem;
        text-align: center;
        color: #797B89;
        font-size: 12rem;
        font-weight: 500;
    }
}

.betResult {
    padding: 16rem;
    display: flex;
    flex-direction: column;

    .betContent {
        .betRow {
            display: flex;
            flex-direction: row;
            justify-content: center;

            .betColumn {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 27rem;
                height: 27rem;
                margin: 4rem;
                border-radius: 4rem;
                border: 1rem solid transparent;
                color: #FFF;

                &.borderBet {
                    border-color: #CBD5E0;
                    background-color: #D9E4EE;
                }

                &.medal {
                    background-image: url('@/assets/images/Race/medal.png');
                    background-repeat: no-repeat;
                    background-size: 120% 120%;
                    background-position: center;
                }

                &.active {
                    background-image: url('@/assets/images/ColorfulLottery/inputMoney.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    background-position: center;
                    border-color: transparent;
                    background-color: transparent;
                    border-radius: 0;
                }
            }
        }

        .tips {
            display: flex;
            flex-direction: row;
            align-items: center;

            &>img {
                width: 24rem;
                height: 24rem;
            }

            &>p {
                margin-left: 10rem;
            }
        }
    }

    .tips {
        margin-right: 12rem;
        margin-top: 25rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        align-self: flex-end;

        img {
            width: 24rem;
            height: 24rem;
        }

        p {
            margin-left: 10rem;
            color: #666F80;
            font-size: 14rem;
        }
    }
}